<template>
  <div class="box">
    <div class="card">
      <div class="first_box">
        <div class="search">
          <el-row>
            <el-col :span="24" class="addBtn1"
              ><el-button
                type="success"
                class="addBtn"
                icon="el-icon-edit"
                size="small"
                @click="addUser"
                >新增试题</el-button
              ></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>学科</span>
              <el-select v-model="subjectID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in subjectsSimpleList"
                  :key="index"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>二级目录</span>
              <el-select v-model="catalogID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in directorySimpleList"
                  :key="index"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>标签</span>
              <el-select v-model="tags" placeholder="请选择">
                <el-option
                  v-for="(item, index) in tagsSimpleList"
                  :key="index"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>关键字</span>
              <el-input
                placeholder="请输入"
                v-model="keyword"
                size="small"
              ></el-input
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>试题类型</span>
              <el-select v-model="questionType" placeholder="请选择">
                <el-option
                  v-for="(item, index) in ['单选', '多选', '简答']"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>难度</span>
              <el-select v-model="difficulty" placeholder="请选择">
                <el-option
                  v-for="(item, index) in ['简单', '一般', '困难']"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>方向</span>
              <el-select v-model="direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <span>录入人</span>
              <el-select v-model="creatorID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in []"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <span>题目备注</span>
              <el-input
                placeholder="请输入"
                v-model="remarks"
                size="small"
              ></el-input
            ></el-col>
            <el-col :span="6">
              <span>企业简称</span>
              <el-input
                placeholder="请输入"
                v-model="shortName"
                size="small"
              ></el-input
            ></el-col>
            <el-col :span="6">
              <span style="width: 160px">城市</span>
              <el-select v-model="province" placeholder="请选择">
                <el-option
                  v-for="(item, index) in provinceslist"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
              <el-select v-model="city" placeholder="请选择">
                <el-option
                  v-for="(item, index) in cityslist"
                  :key="index"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6" class="btns"
              ><el-button size="small" @click="clean">清除</el-button
              ><el-button type="primary" size="small" @click="search"
                >搜索</el-button
              ></el-col
            >
          </el-row>
        </div>
      </div>

      <div>
        <el-button
          @click="fifterAll"
          :class="{ colorBtn: colorBtn === 'All' }"
          style="margin: 0; border-radius: 3px"
          >全部</el-button
        >
        <el-button
          @click="fifterWait"
          :class="{ colorBtn: colorBtn === 'Wait' }"
          style="margin: 0; border-radius: 0"
          >待审核</el-button
        >
        <el-button
          @click="fifterTrue"
          :class="{ colorBtn: colorBtn === 'True' }"
          style="margin: 0; border-radius: 0"
          >已审核</el-button
        >
        <el-button
          @click="fifterFalse"
          :class="{ colorBtn: colorBtn === 'False' }"
          style="margin: 0; border-radius: 3px"
          >已拒绝</el-button
        >
      </div>

      <div class="sum">
        <div class="el-icon-info sums">
          &nbsp;共&nbsp;{{ counts }}&nbsp;条记录
        </div>
      </div>

      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column prop="subjectID" label="学科" align="center">
          </el-table-column>
          <el-table-column prop="catalogID" label="目录" align="center">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" align="center">
            <template slot-scope="scope">
              {{
                scope.row.questionType === "1"
                  ? "单选"
                  : scope.row.questionType === "2"
                  ? "多选"
                  : scope.row.questionType === "3"
                  ? "简答"
                  : null
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            align="center"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.addDate.slice(0, 10) }}&nbsp;{{
                scope.row.addDate.slice(11, 19)
              }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" align="center">
            <template slot-scope="scope">
              {{
                scope.row.questionType === "1"
                  ? "简单"
                  : scope.row.questionType === "2"
                  ? "一般"
                  : scope.row.questionType === "3"
                  ? "困难"
                  : null
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="chkState"
            label="审核状态"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              {{
                scope.row.chkState === 0
                  ? "待审核"
                  : scope.row.chkState === 1
                  ? "已通过"
                  : scope.row.chkState === 2
                  ? "已拒绝"
                  : null
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="chkRemarks"
            label="审核意见"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="chkUser"
            label="审核人"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="creator"
            label="发布状态"
            align="center"
            width="100"
            ><template slot-scope="scope">
              {{
                scope.row.chkState === 1
                  ? scope.row.publishState === 0
                    ? "已下架"
                    : scope.row.publishState === 1
                    ? "已发布"
                    : null
                  : "待发布"
              }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center "
            width="240"
            prop="isFamous"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                class="ellink"
                @click="handleeye(scope.$index, scope.row)"
                >预览</el-link
              >
              <el-link
                type="primary"
                class="ellink"
                @click="handleExamine(scope.$index, scope.row)"
                :disabled="scope.row.chkState !== 0"
                >审核</el-link
              >

              <el-link
                type="primary"
                class="ellink"
                @click="handleEdit(scope.$index, scope.row)"
                :disabled="scope.row.publishState === 1"
                >修改</el-link
              >
              <el-link
                type="primary"
                class="ellink"
                @click="handleTure(scope.$index, scope.row)"
                :disabled="scope.row.chkState !== 1"
                >{{
                  scope.row.chkState === 1
                    ? scope.row.publishState === 0
                      ? "上架"
                      : "下架"
                    : "上架"
                }}</el-link
              >
              <el-link
                type="primary"
                class="ellink"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 30, 50]"
          :page-size="pagesize"
          layout=" prev, pager,next, sizes, jumper   "
          :total="counts"
          background
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="题目审核" :visible.sync="dialogFormVisible" width="400px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-radio-group v-model="form.chkState" size="medium" class="radio">
          <el-radio label="通过"></el-radio>
          <el-radio label="拒绝"></el-radio>
        </el-radio-group>

        <el-input
          type="textarea"
          placeholder="请输入审核意见"
          v-model="form.chkRemarks"
        ></el-input>
      </el-form>
      <div slot="footer" class="addBtn1">
        <el-button @click="dialogFormH">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>

    <questionsPreview ref="child" :genderList="genderList"></questionsPreview>
  </div>
</template>

<script>
import {
  choice,
  choiceAdd,
  detail,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import questionsPreview from '@/module-hmmm/components/questions-preview'
import { direction } from '@/api/hmmm/constants.js'
// 简单列表名字冲突,手动请求
import { createAPI } from '@/utils/request'
export default {
  name: 'users',
  components: {
    questionsPreview
  },
  data () {
    return {
      colorBtn: 'All',
      dialogFormVisible: false,
      // 弹窗标识
      titleInfo: '',
      provinceslist: [],
      cityslist: [],
      // 单页列表
      tableData: [],
      // 参数
      counts: null,
      pagesize: 10,
      page: 1,
      pages: null,
      subjectID: null,
      difficulty: null,
      questionType: null,
      tags: null,
      province: null,
      city: null,
      keyword: null,
      remarks: null,
      shortName: null,
      direction: null,
      creatorID: null,
      catalogID: null,

      directionList: [],
      genderList: {},

      form: {
        id: null,
        chkState: '通过',
        chkRemarks: ''
      },

      subjectsSimpleList: [],
      directorySimpleList: [],
      tagsSimpleList: []
    }
  },

  async created () {
    this.subjectssimple()
    this.directionList = direction
    this.provinceslist = provinces()
    this.gender()
  },

  methods: {
    // 渲染
    async gender () {
      const { data } = await choice({
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.subjectID,
        difficulty: this.difficulty,
        questionType: this.questionType,
        tags: this.tags,
        province: this.province,
        city: this.city,
        keyword: this.keyword,
        remarks: this.remarks,
        shortName: this.shortName,
        direction: this.direction,
        creatorID: this.creatorID,
        catalogID: this.catalogID,
        chkState: this.chkState
      })
      this.tableData = data.items
      this.counts = data.counts
      this.pages = data.pages
    },
    // 翻页
    async handleSizeChange (e) {
      this.pagesize = e
      this.page = 1
      this.gender()
    },
    async handleCurrentChange (e) {
      this.page = e
      this.gender()
    },
    // 清除
    clean () {
      this.subjectID = null
      this.difficulty = null
      this.questionType = null
      this.tags = null
      this.province = null
      this.city = null
      this.keyword = null
      this.remarks = null
      this.shortName = null
      this.direction = null
      this.creatorID = null
      this.catalogID = null
      this.page = 1
      this.pagesize = 10
      this.gender()
    },
    // 搜索
    search () {
      this.page = 1
      this.gender()
    },

    // 新增用户
    addUser () {
      this.$router.push({ path: 'new', name: 'questions-new' })
    },
    // 删除(移除精选)
    async handleDelete (index, row) {
      this.$confirm('此操作将该题目移除精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({ id: row.id, choiceState: 0 })
          this.$message({
            type: 'success',
            message: '移除成功!'
          })
          this.gender()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消移除'
          })
        })
    },
    // 编辑
    handleEdit (index, row) {
      this.$router.push({
        path: 'new',
        name: 'questions-new',
        components: { id: row.id }
      })
    },
    // 上下架
    handleTure (index, row) {
      if (row.publishState === 0) {
        this.$confirm('确定上架该题目吗? 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: row.id, publishState: 1 })
            this.$message({
              type: 'success',
              message: '上架成功!'
            })
            this.gender()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消上架'
            })
          })
      } else {
        this.$confirm('确定下架该题目吗? 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({ id: row.id, publishState: 0 })
            this.$message({
              type: 'success',
              message: '下架成功!'
            })
            this.gender()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消下架'
            })
          })
      }
    },
    // 预览
    async handleeye (index, row) {
      this.$refs.child.showDialog()
      const { data } = await detail({ id: row.id })
      this.genderList = data
    },
    dialogFormH () {
      this.dialogFormInit()
      this.dialogFormVisible = false
    },
    dialogFormInit () {
      this.form = {
        id: null,
        chkState: '通过',
        chkRemarks: ''
      }
    },
    // 审核
    handleExamine (index, row) {
      this.form.id = row.id
      this.dialogFormVisible = true
    },
    async createData () {
      this.form.chkState = this.form.chkState === '通过' ? 1 : 2
      try {
        await choiceCheck(this.form)
        this.gender()
        this.dialogFormH()
        this.$message({
          type: 'success',
          message: '审核成功!'
        })
      } catch (e) {
        this.$message('审核失败')
      }
    },
    // fifterAll
    fifterAll () {
      this.colorBtn = 'All'
      this.page = 1
      this.pagesize = 10
      this.chkState = null
      this.gender()
    },
    // fifterWait
    fifterWait () {
      this.colorBtn = 'Wait'
      this.page = 1
      this.pagesize = 10
      this.chkState = 0
      this.gender()
    },
    // fifterTrue
    fifterTrue () {
      this.colorBtn = 'True'
      this.page = 1
      this.pagesize = 10
      this.chkState = 1
      this.gender()
    },
    // fifterFalse
    fifterFalse () {
      this.colorBtn = 'False'
      this.page = 1
      this.pagesize = 10
      this.chkState = 2
      this.gender()
    },
    async subjectssimple () {
      this.subjectsSimpleList = (
        await createAPI('/subjects/simple', 'get')
      ).data
      this.directorySimpleList = (
        await createAPI('/directorys/simple', 'get')
      ).data
      this.tagsSimpleList = (await createAPI('/tags/simple', 'get')).data
    }
  },
  watch: {
    province (newVal) {
      if (this.provinceslist.find((item) => item === newVal)) {
        this.cityslist = citys(newVal)
      }
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding-top: 1.7%;
  .card {
    padding: 1.5%;
    width: 97%;
    // height: 700px;
    margin: 0 auto;
    background-color: #fff;
    .first_box {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      // height: 32px;
      margin-bottom: 20px;
      .search {
        width: 100%;
        .el-row {
          margin-bottom: 20px;
        }
        .el-col {
          color: #606266;
          font-size: 14px;
          display: flex;
          span {
            width: 80px;
            height: 100%;
            text-align: right;
            font-weight: 700;
            margin-right: 10px;
            line-height: 32px;
          }
          .el-input {
            width: 75%;
          }
        }
        .btns {
          padding-left: 4%;
          .el-button {
            height: 100%;
          }
        }
        .addBtn1 {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .sum {
      width: 100%;
      height: 32px;
      background-color: #f4f4f5;
      margin-bottom: 20px;
      margin-top: 20px;
      border-radius: 3px;
      .sums {
        font-size: 13px;
        line-height: 32px;
        color: #909399;
        margin-left: 12px;
      }
    }
    .block {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}
.ellink {
  margin-left: 10px;
  font-size: 12px;
}
.typecolor {
  color: #c0c4cc;
}
.radio {
  margin-bottom: 30px;
}
.colorBtn {
  color: #409eff;
  border-bottom: 0;
}
</style>
